<template>
  <el-input v-model="filterText" style="width: 240px" placeholder="请输入功能名称" />
  <el-tree ref="treeRef" style="max-width: 600px" class="filter-tree" default-expand-all :data="menuTreeData"
    :filter-node-method="filterNode" @node-click="HandNodeClick">
  </el-tree>
</template>
<script lang="ts" setup>

import menuTreeData from '@/system/Config/MenuTreeConfig'
import { ElTree } from 'element-plus'

const emits = defineEmits(['targetComponentCode'])

const filterText = ref('')
const treeRef = ref<InstanceType<typeof ElTree>>()

watch(filterText, (val) => {
  treeRef.value!.filter(val)
})

const filterNode = (value: string, data: any) => {
  if (!value) return true
  return data.label.includes(value)
}

const HandNodeClick = (_clickNode: any, node: any) => {
  //只显示叶子节点的功能
  if (node.isLeaf) {
    emits("targetComponentCode", node.data.componentCode)
  }
}


</script>

<style lang="scss" scoped>
.el-tree {
  background: #333541ab;
  color: #e9edf5;
  padding: 10px;
  border-bottom-left-radius: 5px;
  border-bottom-right-radius: 5px;
  --el-tree-node-hover-bg-color: #868c96;
  :deep(.el-text){
    color:white;
  }
 
}

.el-input {
  --el-input-bg-color: #594545;
  color: white;
}
</style>